<template>
  <Modal v-model="modal" title="门店类型发生变更，请确认以下选项">
    <div class="tag-modal">
      <div class="mb">
        <p style="height: 30px; line-height: 30px; color: red;">注意:</p>
        <p style="height: 30px; line-height: 30px; color: red;">1、抢购/云豆抽奖不受下面选项影响，立即按最新门店类型执行相关逻辑</p>
        <p style="height: 30px; line-height: 30px; color: red;">2、巡店频率不受下面选项影响，下一个巡店周期生效</p>
      </div>
      <Form :model="form" :label-width="80" ref="form" :rules="rules" label-width="10">
        <FormItem>
          <RadioGroup v-model="form.radio" vertical>
            <Radio label="true" value="true">
              <div class="div-radio">
                <p>当月生效</p>
                <p style="color: red;">注意：</p>
                <p style="color: red;">月度积分返利/季度积分返利/门店基金/门店任务量，</p>
                <p style="color: red;">当月所有数据按新门店类型来计算，</p>
                <p style="color: red;">次月审核时以前一个月最后一刻门店类型来执行相关逻辑</p>
              </div>
            </Radio>
            <Radio label="false" value="false">
              <div class="div-radio">
                <p>次月生效</p>
                <p style="color: red;">注意：</p>
                <p style="color: red;">月度积分返利/季度积分返利/门店基金/门店任务量，</p>
                <p style="color: red;">下个月开始执行新门店类型的相关逻辑</p>
              </div>
            </Radio>
          </RadioGroup>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
</Modal>
</template>
<script>
export default {
  data() {
    return {
      form: {
        radio: 'true'
      },
      modal: false,
      v: {}
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        radio: 'true'
      }
    },
    updateForm(v) {
      this.resetForm()
      this.v = v
      this.openModal()
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    onSave() {
      let {
        ownerName, storeName, storeTypeId
      } = this.v
      if (!storeName) {
        this.$Notice.warning({ title: '请输入门店名称' })
        return
      }
      if (!ownerName) {
        this.$Notice.warning({ title: '请输入门店联系人' })
        return
      }
      if (!storeTypeId) {
        this.$Notice.warning({ title: '请选择门店类型' })
        return
      }
      let params = {
        ...this.v,
        storeTypeEnableNow: this.form.radio === 'true' ? true : false
      }
      this.$jsonPost('/store_contract_audit/audit/commit', params).then(res => {
        this.$emit('complete')
        this.$Message.info('操作成功')
        this.jumpPrevPage()
      })
      this.closeModal()
    }
  }
}
</script>

<style lang="less" scoped>
.ivu-radio-group-vertical .ivu-radio-wrapper {
  display: flex;
  height: auto;
}
.div-radio {
  margin-top: -5px;
}
</style>